import React, { useState, useEffect } from 'react';
import { useNavigate } from 'react-router-dom' //路由
import { Input, Button, Switch, message } from 'antd';
import '../../css/admin/adminList.scss'
import type { ColumnsType } from 'antd/es/table';
import Tables from '../../component/table/Table'
import { adminlist, adminchangestatus, admindel } from '../../api/admin'


const AdminList: React.FC = () => {

    interface DataType {
        key: React.Key;
        name: string;
        age: number;
        address: string;
    }
    const columns: ColumnsType<DataType> = [
        {
            title: '部门名称',
            dataIndex: 'admin_name',
            render: (text: string) => <a>{text}</a>,
        },
        {
            title: '部门',
            dataIndex: 'department',
        },
        {
            title: '角色',
            dataIndex: 'role',
            render: (text: number) => <span>{text === 1 ? "经管负责人" : text === 2 ? "部门负责人" : text === 3}</span>,
        },
        {
            title: '真实姓名',
            dataIndex: 'real_name',
        },
        {
            title: '手机号',
            dataIndex: 'mobile',
        },
        {
            title: '邮箱',
            dataIndex: 'email',
        },
        {
            title: '备注',
            dataIndex: 'remarks',
        },
        {
            title: '是否启用',
            dataIndex: 'is_use',
            render: (text: number, record: any) => {
                if (text === 1) {
                    return <div><Switch defaultChecked className="TablesSwitch" onChange={(checked) => onChange(checked, record)} /></div>
                } else {
                    return <div><Switch className="TablesSwitch" onChange={(checked) => onChange(checked, record)} /></div>
                }
            },
        },
        {
            title: '操作',
            width: "300px",
            render: (item, key) => <div className='Tables_Button'>
                <Button className='TablesButton' onClick={() => Modification(item)} style={{ backgroundColor: "#13ce66" }}>修改</Button>
                <Button className='TablesButton' onClick={() => Delete(item)} style={{ backgroundColor: "#ff4d4f" }}>删除</Button>
                <Button className='TablesButton' onClick={() => Particulars(item)} style={{ backgroundColor: "#909399" }}>详情</Button>
            </div>,
        }
    ];

    const navigate = useNavigate() //路由

    // 详情
    const Particulars = (item: Object) => {
        // console.log(item);
        navigate('/index/adminParticulars?item=' + JSON.stringify(item))
    }

    // 修改
    const Modification = (item: any) => {
        const id = item.admin_id
        navigate('/index/adminAdd?id=' + id)
    }

    // Switch 开关
    const onChange = async (checked: boolean, record: any) => {
        // console.log(`switch to ${checked}`);
        const _data = { admin_id: record.admin_id, is_use: checked };
        const res: any = await adminchangestatus(_data)
        console.log(res);
        if (res.code === '00000') {
            lists()
            message.success("修改成功")
        } else {
            message.error("修改失败")
        }
    };

    // 删除
    const Delete = async (item: any) => {
        // console.log(item.admin_id);
        const res: any = await admindel({ admin_id: item.admin_id })
        // console.log(res);
        if (res.code === '00000') {
            lists()
            message.success("删除成功")
        } else {
            message.error("删除失败")
        }

    }
    // 调列表数据
    const [data, uselist] = useState([]) //列表数据
    const lists = async () => {
        const res: any = await adminlist({ page: 1, pageSize: 10, })
        // console.log(res);
        if (res.code === "00000") {
            uselist(res.data)
        }
    };

    useEffect(() => {
        lists() //掉接口
    }, [])


    const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([]);
    const onSelectChange = (newSelectedRowKeys: React.Key[]) => {
        console.log('selectedRowKeys changed: ', newSelectedRowKeys);
        setSelectedRowKeys(newSelectedRowKeys);
    };
    // 批量删除
    const Deletes = async () => {
        // console.log('批量删除', selectedRowKeys);
        const res: any = await admindel({ admin_id: selectedRowKeys })
        // console.log("批量删除", res);
        if (res.code === '00000') {
            lists()
            message.success("删除成功")
        } else {
            message.error("删除失败")
        }
    }
    const rowSelection = {
        selectedRowKeys,
        onChange: onSelectChange,
    };


    // 查询
    const [inquirevalue, useinquirevalue] = useState([]) //列表数据
    const oninquirevalue = (e: any) => {
        useinquirevalue(e.target.value)
    }
    const Inquire = async () => {
        // console.log(123, inquirevalue);
        const res: any = await adminlist({ idorname: inquirevalue })
        // console.log(213, res);
        if (res.code === "00000") {
            uselist(res.data)
        }
    }

    return (<>
        <div className='adminList'>
            {/* 管理员列表操作栏 */}
            <Input placeholder="请输入要查询的管理员名称" value={inquirevalue} onChange={oninquirevalue} style={{ width: "190px" }} />
            <Button className='adminListButton' onClick={Inquire} style={{ backgroundColor: "#1890ff" }}>查询</Button>
            <Button className='adminListButton' style={{ backgroundColor: "#13ce66" }}>添加</Button>
            <Button className='adminListButton' onClick={Deletes} style={{ backgroundColor: "#ff4d4f" }}>批量删除</Button>
            {/* 管理员列表信息栏 */}
            <div className='adminListData'>
                <Tables rowKey="admin_id" rowSelection={rowSelection} columns={columns} data={data}></Tables>
            </div>
        </div>

    </>);
}

export default AdminList;